/* BEGINNING OF GENERAL CSS */

* {
    box-sizing: border-box;	
    font: 'Oswald', sans-serif;
    --font-body: 'Source Sans 3', sans-serif;
   } 


header {
background-color: #121212;
font-family:Impact, 'Arial Narrow Bold', sans-serif;
width: 100%;
position: sticky ;top: 0;z-index: 50;
color: #F5F1E8;
display: flex;
justify-content: space-between;

}

h2{width: 40%;
color: #F5F1E8;
text-align: left;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;}

#menu {
    display: flex;
    width: 50%;
    justify-content: right;
    gap: 15px;
    align-items: center;
    font-family: 'Arial Narrow Bold', sans-serif;
    text-decoration: none;
    font-size: smaller;
    
}

#menu img {display: none;}

.menu-element {font-weight: bolder;
border: solid #8B0000;
width: 100%;
padding: 5px;
color: #8B0000;
text-align: center;
height: min-content;
font-size: 10px;
}

.menu-element a {text-decoration: none;
color: #8B0000;

}

body {
font-family: "Lucida Sans", sans-serif;
background-color:#121212
}

#wrapper {
width: 100%;
gap: 20px;
position: relative;
}

#video {width: 100%;}

.buffer {width: 100%;
height: 150px;
background-color: #0D0D0D;
position: relative;}

.scroll{
    position: absolute;
    width: 100%;
    bottom: 150%;

}

@keyframes bouncing {
    0% {bottom: 0;}
    50% {bottom: 20px;}
    100% {bottom: 0;}
}

.arrow {
    background-color: #F5F1E8;
    animation: bouncing 1s infinite ease-in-out;
    display: block;
    position:relative ;
    height: 70px;
    width: 70px;
    padding: 15px;
    right: 50%; left: 43%;
}

.arrow a{text-decoration: none;}

#profile {background-color:#1F1F1F;
text-align: center;
height: fit-content;
display: flex;
justify-content: space-between;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
color: #F5F1E8;
z-index: 20;
width: 100%;
padding-top: 70px;
padding-bottom: 30px;
}

#profilepicture{text-align: center;
    width: 30%;

}
#profilepicture img {border-radius: 100px;
width: 50%;
}

#profiletext {width: 60% ;
font-size: 17px;
text-align: center;
padding: 20px;}


#viewgallery {
font-family: Impact, 'Arial Narrow Bold', sans-serif;
position: relative;
width: 300px;
height: 400px;
margin: auto;
padding: 20px;
margin-bottom: 70px;
margin-top: 70px;}

#viewgallery img {
width: 300px;
height: 400px;
position: relative;}

.hidden {display: none;}

#link {
text-decoration: none;
position: absolute;
top:49%;
font-size: 25px;
width: 100%;
text-align: center;
color: #F5F1E8;
}

#pricelist {
      color: #F5F1E8;
    text-align: center;
    padding: 50px;
    padding-top: 10px;
    font-size: 15px; 
}

#gallery{
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-evenly;
    padding: 20px;
}

.gallerypic {border-radius: 25px;
width: 150px;
height: 300px;
}

.gallerypic:hover {transform: scale(1.15,1.15);}

.catalogue-container {
  
  perspective: 1000px; 
  width: 100%;
  height: 500px;    
  position: relative;
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 100px;
  margin-top: 10px;
}

.catalogue {                             
  
    transform-style: preserve-3d ;  
    backface-visibility: hidden;      
    transition: all 3s;
}
 .catalogue:hover {
  transform: rotateY(180deg); 
} 
.front {
    width: 500px;
    height: 500px;
    
}

.front img{
 height: 100%;

}

.back {
    width: 400px;
    height: 450px;
    position: absolute;
    margin: auto;
    font-size: 200%;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;

}

.back {
  transform: rotateY(180deg);
} 


#reviews {
    border-radius: 25px;
    text-align: center;
    padding: 50px;
    width: 100%;

    
}

#reviews img {width: 200px;
    height: 100px;
border-radius: 25px;
margin: auto;
}

footer {text-align: center;
background-color: #707070 ;
font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: small;
color: #0D0D0D;
width: 100%;
bottom: 0;
height: fit-content;
padding: 0%;}

#instagram img {width: 2%;
padding-top: 10px;}



/* FLASH */

#textflash{ 
    color: #F5F1E8;
    text-align: center;
    padding: 20px;
    padding-top: 0;
}
.catalogue {
 background-color: #121212;
 text-align: center;
 color: #F5F1E8;
}

.catalogue img {width: 40%;}

  
    


/* BOOKINGS */

 
 form {display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px;
    background-color: #121212;
    color: #F5F1E8;
  }
  #dates{
    width: 100%;
    padding: 20px;
    margin: auto;
    align-items: center;
    text-align: center;

  }
  #clear {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin: auto;
  }

  input {background-color:#F5F1E8;
    width:80% ;
    color:#1F1F1F;
    border-color:#1F1F1F;
  }


.item{
  background-color:#0D0D0D;
  padding: 20px;
  width: 18%;
  text-align: center;
  color:#707070
  
}






	   	  	   					/* END OF GENERAL CSS */

/* For big desktop: */


@media only screen and (min-width: 1281px) { 

body {
width: 1280px;
margin: auto;
   }
}



/* For desktop: */

@media only screen and (min-width: 769px) and (max-width: 1280px)   {

#menuimg {display: none;
}

.menu-element {display: block;}

}

/* For tablets: */

@media only screen and (max-width: 768px) and (min-width: 481px) {


#menu {display: flex;
flex-wrap: nowrap;
width: 70%;
justify-content: right;}   

#menu img {display: none;}

.menu-element {display: block;}

#profile {background-color:#1F1F1F;
text-align: center;
height: fit-content;
display: flex;
justify-content: space-between;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
color: #F5F1E8;
z-index: 20;
width: 100%;
padding-top: 70px;
padding-bottom: 30px;
}

#profilepicture{text-align: center;
    width: 40%;
    font-size: smaller;

}
#profilepicture img {border-radius: 100px;
width: 50%;
}

#profiletext {width: 60% ;
font-size: 11px;
text-align: center;
padding: 20px;}


#viewgallery {
width: 300px;
height: 400px;
margin: auto;
margin-bottom: 70px;
margin-top: 70px;}

#viewgallery img {
width: 300px;
height: 400px;
position: relative;}


#pricelist {
    color: #F5F1E8;
    text-align: center;
    padding: 50px;
    padding-top: 10px;
    font-size: 15px; 
}

#gallery{
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-evenly;
    padding: 20px;
}

.gallerypic {border-radius: 25px;
width: 200px;
height: 350px;
}

.gallerypic:hover {transform: scale(1.15,1.15);}


.catalogue-container { 
  
  

  height: 1000px;    
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin-bottom: 100px;
  margin-top: 10px;
}
 
.front {
    width: 450px;
    height: 450px;
    
}


.back {
    width: 450px;
    height: 450px;
}


#reviews {
    border-radius: 25px;
    text-align: center;
    padding: 50px;
    width: 100%;

    
}

#reviews img {width: 200px;
    height: 100px;
border-radius: 25px;
margin: auto;
}

    
}  


/* For mobile phones: */

@media only screen and (max-width: 480px) { 	

h2 {width: 60%;}

header { display: flex;
flex-wrap: wrap;
position: relative;}

#menu {display: flex;
flex-wrap: wrap;
flex-direction: column;
width: min-content;
align-items: left;
margin-bottom: 20px;
margin-top: 0;
width: 20%;
position: relative;}

#menu img {display: block;
width: 80%;
background-color: #F5F1E8;}


.menu-element {display: none;
border: solid #8B0000;
}

#menu:hover .menu-element {display: block;}

.scroll{
    position: absolute;
    width: 100%;
    bottom: 100%;

}

.arrow {
   width: 50px;
   height: 50px;
}

#profile {

display: flex;
flex-wrap: wrap;

width: 100%;
}
#profilepicture {width: 100%;}
#profiletext {width: 100% ;
}

#viewgallery {

position: relative;
width: fit-content;
height: fit-content;
margin: auto;}

#viewgallery img {
width: 200px;
height: 300px;
}

#link {
font-family: Impact, 'Arial Narrow Bold', sans-serif;
text-decoration: none;
top:49%;
font-size: larger;
width: 200px;
text-align: center;
color: #F5F1E8;
}

#pricelist {
    color: #F5F1E8;
    text-align: center;
    padding: 10px;
    font-size: 15px; 
    width: 100%;
}

#gallery{
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-evenly;
    padding: 20px;
}

.gallerypic {border-radius: 25px;
width: 300px;
height: 300px;
}

.gallerypic:hover {transform: scale(1.15,1.15);}


.catalogue-container { 
  
  

  height: 700px;    
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin-bottom: 100px;
  margin-top: 10px;
}
 
.front {
    width: 300px;
    height: 300px;
    
}


.back {
     width: 300px;
    height: 300px;
}


#reviews {
    border-radius: 25px;
    text-align: center;
    padding: 50px;
    width: 100%;

    
}
}